<template>
  <div>
    <a-button type="primary"
    @click="showAddFrom()">添加权限</a-button>
    <a-table
      ref="table"
      :columns="columns"
      :data-source="pmsList"
      :rowKey="(record) => record.id"
    >
    <template #do="text,record">
      <a-space>
        <a-button type="primary" shape="round" size="small" @click="showEditFrom(record.id)">编辑</a-button>
        <a-button type="danger" shape="round" size="small" @click="Deletepms(record.id)">删除</a-button>
      </a-space>
    </template>
      
    </a-table>

    <form-box title="添加部门"
    v-show="showAddFromFlag"
    @hide="hideAddFrom"
    @update="Addpms">
      <a-form-item label="部门名称">
        <a-input placeholder="已有部门名称" v-decorator="['pms',{initialValue: getValue.name, rules:[{required: true, message: '请输入正确的部门名称'}]}]"></a-input>
      </a-form-item>
      <a-form-item label="负责人">
        <a-input placeholder="已有角色名称" v-decorator="['name',{initialValue: getValue.managementName, rules:[{required: true, message: '请输入正确的角色名称'}]}]"></a-input>
      </a-form-item>
    </form-box>

    <form-box title="编辑部门"
    v-show="showEditFromFlag"
    @hide="hideEditFrom"
    @update="Editpms">
      <a-form-item label="部门名称">
        <a-input placeholder="已有部门名称" v-decorator="['name',{initialValue: getValue.name, rules:[{required: true, message: '请输入正确的部门名称'}]}]"></a-input>
      </a-form-item>
      <a-form-item label="负责人">
        <a-input placeholder="已有角色名称" v-decorator="['managementId',{initialValue: getValue.managementName, rules:[{required: true, message: '请输入正确的角色名称'}]}]"></a-input>
      </a-form-item>
    </form-box>
  </div>
</template>

<script>
import { fetchPermissionList, requestDeletePermission, requestAddPermission, requestUpdatePermission } from "@/api/system/pms"
import formBox from '../../components/formBox.vue';

export default {
  components: { formBox },
  data() {
    return {
      pmsIndex: null,
      showAddFromFlag: false,
      showEditFromFlag: false,
      pmsList: [],
      columns: [
        {
          title: "标题",
          dataIndex: "title",
          key: "title",
        },
        {
          title: "名称",
          dataIndex: "name",
          key: "name",
        },
        {
          title: "操作",
          dataIndex: "do",
          key: "do",
          scopedSlots: { customRender: "do" },
        }

      ],
    }
  },
  methods:{
    //=======showEdit=======
    showEditFrom(index){
      this.pmsIndex = index;
      this.showEditFromFlag = true;
    },
    hideEditFrom(){
      this.showEditFromFlag = false;
    },
    //========showAdd======
    showAddFrom(){
      this.showAddFromFlag = true;
    },
    hideAddFrom(){
      this.showAddFromFlag = false;
    },
    getpmsList(){
      fetchPermissionList({
          token: "89c71f5f29d34b4699bcb516affc950d",
      }).then((res)=>{
          console.log("====pms====",res);
          this.pmsList = res.data.data;
      }).catch((_) => {
        console.log(_);
        //   this.confirmLoading = false;
      });
    },
    Editpms({name, managementId}){
      requestUpdatePermission({
        id: this.getValue.id,
        managementId: managementId,
        name: name,
      }).then((res)=>{
          console.log("=====修改成功=====",res);
        this.getpmsList();
        this.hideEditFrom();
      }).catch((_) => {
        console.log(_);
        //   this.confirmLoading = false;
      });
    },
    Deletepms(pmsId){
      requestDeletePermission({
        id: pmsId
      }).then((res)=> {
        console.log("=====删除成功=====",res);
        this.getpmsList();
      }).catch((_) => {
        console.log(_);
        //   this.confirmLoading = false;
      });
    },
    Addpms({name, pms}){
      requestAddPermission({
        name: pms,
        managementId: name,
      }).then((res)=> {
        console.log("=====添加成功=====",res);
        this.getpmsList();
        this.hideAddFrom();
      }).catch((_) => {
        console.log(_);
        //   this.confirmLoading = false;
      });
    }
  },
  computed:{
    getValue(){
        if(this.pmsIndex!=null)
        return this.pmsList.filter(item =>
            item.id === this.pmsIndex
        )[0];
        else return '';
    }
  },

  mounted(){
    this.getpmsList();
  }
}
</script>

<style>
</style>